<template>
  <div class="hasNav" style="padding-top: 20px;">
    <van-nav-bar title="药品详情" left-text="返回" left-arrow @click-left="$router.back()" fixed />
    <div class="detail-view">
      <div class="detail-content">
        <div class="product">
          <div class="cate-title">基本信息</div>
          <div class="product-content">
            药品类型：<span v-html="typeName"></span><br>
            药品名称：<span v-html="name"></span><br>
            通用名称：<span v-html="commonName"></span><br>
            组成成分：<span v-html="component"></span><br>
          </div>
        </div>
        <div class="product">
          <div class="cate-title">适应症状</div>
          <div class="product-content" v-html="indication"></div>
        </div>
        <div class="product">
          <div class="cate-title">不良反应</div>
          <div class="product-content" v-html="adverseReaction"></div>
        </div>
        <div class="product">
          <div class="cate-title">服用禁忌</div>
          <div class="product-content" v-html="contraindication"></div>
        </div>
        <div class="product">
          <div class="cate-title">服用剂量</div>
          <div class="product-content" v-html="dosage"></div>
        </div>
        <div class="product">
          <div class="cate-title">注意事项</div>
          <div class="product-content" v-html="note"></div>
        </div>
        <Loading :isShow="loading"></Loading>
      </div>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading';
import { getDrugDetail } from '../../api/drug';
export default {
  name: 'drugDetail',
  components: {
		Loading,
	},
  data() {
    return {
      loading: true,
			name: '',
			typeName: '',
			commonName: '',
			adverseReaction: '',
			component: '',
			contraindication: '',
			dosage: '',
			indication: '',
			note: '',
    }
  },
  mounted() {
		let id = this.$route.query.id;
		this.getDrug(id)
	},
	methods: {
		async getDrug(id) {
			try {
				this.loading = true;
				const { code, msg, data } = await getDrugDetail(id);
				if (code == 200) {
					this.name = data.name;
					this.typeName = data.typeName;
					this.commonName = data.commonName;
					this.adverseReaction = data.adverseReaction;
					this.component = data.component;
					this.contraindication = data.contraindication;
					this.dosage = data.dosage;
					this.indication = data.indication;
					this.note = data.note;
				} else {
					this.$toast(msg);
				}
				this.$nextTick(() => {
					this.loading = false;
				});
			} catch (error) {
				console.log(error);
				this.loading = false;
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.detail-view {
  margin-bottom: 50px;
}
.detail-content {
  .cate-title {
    margin: 40px 0 0 0;
    font-size: 20px;
    color: #333333;
    line-height: 24px;
    font-weight: 600;
    position: relative;
    padding-left: 10px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      width: 5px;
      height: 24px;
      background-color: #bf2a2f;
    }
  }
  .product {
    .product-content {
      margin: 10px 20px;
      line-height: 24px;
      font-size: 14px;
      letter-spacing: 0;
      color: #333333;
    }
  }
}
</style>
